<template>
    <div>
        <van-field
            v-model="dateValue"
            v-bind="$attrs"
            readonly
            @click="show = true"
            class="input_text no-border"
            @input="val=>this.$emit('input',val)"
        >
        <template #right-icon>
            <van-icon name="arrow" />
        </template>
        </van-field>
        <van-calendar :title="title" :type="$attrs.calendarType" v-model="show" :color="color" @confirm="onConfirm" />
    </div>
</template>
<script>
import { getDate } from "@/utils/getDate.js";
export default {
    name:"eagle-date2",
    props:{
        title:{
            type:String,
            default:"日期选择"
        },
        color:{
            type:String,
            default:"#1989fa"
        }
    },
    data() {
        return {
            show:false,
            dateValue:null,
        }
    },
    watch:{
    },
    methods:{
        onConfirm(date){
            this.dateValue = null;
            
            if(this.$attrs.calendarType && this.$attrs.calendarType == "range"){
                const [start, end] = date;
                this.dateValue = `${getDate(start)} - ${getDate(end)}`;
            }
            else{
                this.dateValue = getDate(date);
            }
            this.$emit("input", this.dateValue);
            this.$emit("change", this.dateValue);
            this.show = false;
        },
    }
}
</script>
<style lang="less" scoped>

</style>